html,body {
    max-width: 720px;
    overflow-x:hidden;
    margin: 0 auto;
}


/* 底部导航栏 */
/* footer start */
.footer {
    height: 55px;
  }
  .footer-seat {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
  }
  .footer-lists {
    max-width: 720px;
    height: 55px;
    margin: 0 auto;
    background-color: #fff;
  }
  .footer-lists ul {
    display: flex;
    height: 55px;
    text-align: center;
    align-items: center;
  }
  .footer-lists li {
    flex: 0 1 24%;
    position:relative;
  }
  .footer-lists li .count{
    position: absolute;
    top: 0;
    right: 20px;
    border-radius: 20%;
    border: 1px solid #f00;
    padding: 0 5px;
    color: #fff;
    background: red;
  }
  .footer-lists li a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #333;
    text-decoration: none;
    position: relative;
  }
  .footer-lists li i {
    font: 700 24px arial;
    padding: 5px 0;
  }
  .footer-lists .selected {
    color: #32aaa9;
  }
  /* footer end */
  
  /* other.html */
  .other-header {
    position: relative;
  }
  .other-header img {
    width: 100%;
  }
  .other-header .go-back{
    position: absolute;
    left: 20px;
    top: 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
  }
  .back {
    position: absolute;
    left: 10px;
    top: 25px;
    background: #d3d3d3 url(../image/back.png) no-repeat 50%;
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    padding: 3px;
    border-radius: 50%;
  }
  /* 底部 */
  .footer-other {
    max-width: 720px;
    height: 55px;
    margin: 0 auto;
    background-color: #fff;
  }
  .footer-other ul {
    display: flex;
    height: 55px;
    justify-content: space-around;
    text-align: center;
    align-items: center;
  }
  .footer-other li a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #333;
    text-decoration: none;
    position: relative;
  }
  .footer-other li i {
    font: 700 24px arial;
    padding: 5px 0;
  }
  .buy {
    border-radius: 20px 0 0 20px;
    border: 1px solid #32aaa9;
    padding: 10px 15px;
    color: #32aaa9;
  }
  .add-car {
    border-radius: 0 20px 20px 0;
    background: #32aaa9;
    border: 1px solid #32aaa9;
    padding: 10px 15px;
    color: #fff;
    margin-left: -5px;
  }
  .other-title {
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid #f8f8f8;
  }
  .title-price {
    padding: 10px 0;
  }
  .title-price i {
    font-style: normal;
    font-size: 12px;
  }
  .title-price em {
    font-style: normal;
    font-size: 20px;
    margin-left:-5px;
    font-weight: 700;
  }
  .title-text {
    font-weight: 700;
    font-size: 16px;
  }
  .other-discount {
    padding: 20px;
    border-bottom: 1px solid #f8f8f8;
    margin: 10px 0;
  }
  .other-discount span {
    border: 1px solid #fb344d;
    font-size:xx-small;
    margin: 10px;
    padding: 0 3px;
  }
  .other-discount i {
    font-style: normal;
  }
  .details img {
    width: 100%;
  }
  /* 购物车 */
  .basket ul li {
      display: flex;
      justify-content: left;
      margin: 10px 0;
      border-bottom: 1px solid #ccc;
  }
  .basket-img {
      text-align: center;
      margin: 10px;
  }
  .basket-img img {
      max-width: 100px;
  }
  .basket-list {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
  }

/* 首页头部 */
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1rem;
}
.header .header-user i {
    font-size: 3rem;
    color: #ccc;
}
.header-input {
    position: relative;
}
.header-input input {
    border: 0;
    background-color: #f3f3f3;
    padding: 1rem;
    text-align: center;
    border-radius: 1rem;
}
.header-input i {
    position: absolute;
    left: 40px;
    top: 8px;
}
.header-add i {
    font-size: 3rem;
}
/* 多行导航栏 */
.navmenu {
    position: relative;
}
.navmenu ul {
    display: flex;
    flex-wrap: wrap;
}
.navmenu ul li {
    flex: 0 1 20%;
    text-align: center;
    margin: 1rem 0;
}
.navmenu ul li span {
    display: block;
}

.navmenu ul li:nth-child(-n + 5) svg {
    width: 4em;
    height: 4em;
}
.navmenu ul li:nth-child(n + 6) svg {
    width: 2em;
    height: 2em;
}
.badge {
    color: #fff;
    background-color: #F73320;
    border-radius: 10px 14px 14px 0;
    padding: 2px 10px;
    position: absolute;
    left: 40px;
    top: 94px;
    transform:scale(.7);
}

/* 轮播图 */
.banner {
    background-color: #F5F5F5;
    padding: 0 2rem;
}
.banner img {
    width: 100%;
    border-radius: 1rem;
}
/* 商品展示区 */
.main {
    background-color: #F5F5F5;
    padding: 1rem 2rem;
}
.main-list {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    margin: 1rem 0;
}
.main-list .main-img {
    width: 30%;
}
.main-list .main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}
.main-list .main-item {
    width: 70%;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 1.2rem;
}
.main-module-1 h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-module-2 b {
    color: #F73320;
    font-weight: 500;
    margin-right: 1rem;
}
.sales,
 .send,
 .expenses {
    color: #666;
}
.free {
    color:#F73320;
}
.send {
    margin-right: 1rem;
}
.main-module-4 span {
    border:1px solid #F73320;
    border-radius: .5rem;
    color: #F73320;
    padding: 1px;
    display: inline-block;
    transform: scale(.8);
}

.shoppingCart {
    background: red;
    color: #fff;
    border-radius: 10%;
    padding: 5px;
    margin: 0 10px;
}